<template>
  <div>
    <basic-container>
      <div class="flex flex-between">
        <h3 class="m0">{{ title }}</h3>
        <div>总学习时长：{{ sumStudyTimeHour }}小时 / {{ sumRequireTimeHour }}小时</div>
      </div>
    </basic-container>

    <basic-container class="mt-10">
      <el-tabs tab-position="left" @tab-click="changeTabs">
        <el-tab-pane :label="item.classificationName" v-for="item in treeData" :key="item.classificationId">
          <div class="flex flex-between">
            <div class="flex">
              <div class="flex align-center mr10">
                <span class="nowrap">名称：</span>
                <el-input v-model="query.name" placeholder="请输入知识点名称"></el-input>
              </div>
              <div class="flex align-center mr10">
                <span class="nowrap">状态：</span>
                <el-select v-model="query.studyStatus" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </div>
              <el-button type="primary" icon="search" @click="onsearch">搜索</el-button>
              <el-button type="info" plain icon="search" @click="onreset">重置</el-button>
            </div>
            <div>该分类学习时长: {{ studyTimeHour }}小时 / {{ knowledgeTimeHour }}小时</div>
          </div>

          <div v-if="knowledgeLists.length">
            <div class="flex flex-wrap">
              <div class="panel" v-for="(item, index) in knowledgeLists" :key="index">
                <el-card shadow="hover">
                  <div>
                    <div class="img-wrap">
                      <img :src="url + item.knowledgeVO.attach.id" alt="没有封面" class="image" />
                    </div>
                    <div class="flex1">
                      <h3 class="m0 mb5 securityName" :title="item.knowledgeVO.name">{{ item.knowledgeVO.name }}</h3>
                      <div class="flex flex-between mb5">
                        <div>{{ item.knowledgeVO.securityName }}</div>
                        <div>
                          <span class="orange">{{ item.countStudyUser }}</span>人已学
                        </div>
                      </div>
                      <div class="flex flex-between mb5">
                        <div>
                          <span class="orange">
                            {{ item.knowledgeVO.studyTime.studyTimeHour }} /
                            {{ item.knowledgeVO.countRequireTimeHour }}
                          </span>
                          学时
                        </div>
                        <div :class="setColor(item)">
                          {{ item.knowledgeVO.studyTime.statusName }}
                        </div>
                      </div>
                      <el-button type="warning" round class="w100" size="small" @click="openDialog(item)">学习</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
            <div class="flex flex-center">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.currentPage" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total">
              </el-pagination>
            </div>
          </div>
          <div v-else>
            <img src="@/imgs/noImg.jpeg" alt="" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </basic-container>

    <StudyDialog @close="onClose" ref="study" />
  </div>
</template>

<script>
import { getStudyTime, getKnowledgeList as getPosiKnowList } from '@/api/position/studylog';
import StudyDialog from './dialog.vue';
import { getTabsTree } from '@/api/position/direction';

export default {
  components: { StudyDialog },
  mounted() {
    let studys = sessionStorage.getItem('studys')
    if (studys) {
      studys = JSON.parse(studys)
      this.title = studys.title
      this.id = studys.id
    }
    this.initTree();
  },
  data() {
    return {
      title: '',
      id: '',
      treeData: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      options: [
        {
          label: '已学习',
          value: 2,
        },
        {
          label: '未学习',
          value: 0,
        },
        {
          label: '学习中',
          value: 1,
        },
      ],
      knowledgeLists: [],
      query: {
        name: '',
        studyStatus: '',
      },
      noImg: '../noImg.jpg',
      classificationId: '',
      knowledgeTimeHour: 0,
      studyTimeHour: 0,
      currentKnowledge: {
        knowledgeVO: {},
      },
      sumStudyTimeHour: 0,
      sumRequireTimeHour: 0,
      url: this.baseHost + '/blade-resource/oss/endpoint/viewFile/'
    };
  },
  methods: {
    initTree() {
      getTabsTree().then(res => {
        this.treeData = res.data.data.map(item => {
          return {
            ...item,
            classificationName: item.name,
            classificationId: item.id,
          };
        });
        this.changeTabs({ index: 0 });
      });
      this.getStudyTime();
    },
    getStudyTime() {
      getStudyTime(this.id).then(res => {
        this.sumStudyTimeHour = res.data.data.studyTimeHour;
        this.sumRequireTimeHour = res.data.data.knowledgeTimeHour;
      });
    },
    getClassificationTime(classificationId) {
      if (!classificationId) {
        return
      }
      getStudyTime(this.id, classificationId).then(res => {
        this.studyTimeHour = res.data.data.studyTimeHour;
        this.knowledgeTimeHour = res.data.data.knowledgeTimeHour;
      });
    },
    getKnowledgeList(id) {
      const { name, studyStatus } = this.query;
      let values = {
        positionInstanceId: this.id,
        classificationId: id,
        current: this.page.currentPage,
        size: this.page.pageSize,
        studyStatus,
        name,
      };

      this.getClassificationTime(id);
      getPosiKnowList(values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.knowledgeLists = data.records;
      });
    },
    handleCurrentChange(e) {
      this.page.currentPage = e;
      this.getKnowledgeList(this.classificationId);
    },
    handleSizeChange(e) {
      this.page.pageSize = e;
      this.getKnowledgeList(this.classificationId);
    },
    changeTabs({ index }) {
      if (!this.treeData[index]) {
        return;
      }
      const id = this.treeData[index].classificationId;
      this.classificationId = id;
      this.getKnowledgeList(id);
    },
    setColor(item) {
      const { statusName } = item.knowledgeVO.studyTime;
      switch (statusName) {
        case '学习中':
          return 'green';
        case '未学习':
          return 'orange';
        case '已学习':
          return 'blue';
      }
    },
    onreset() {
      this.query.name = '';
      this.query.studyStatus = '';
      this.getKnowledgeList(this.classificationId);
    },
    onsearch() {
      this.getKnowledgeList(this.classificationId);
    },
    openDialog(currentKnowledge) {
      this.$refs.study.open(currentKnowledge);
    },
    onClose() {
      this.getKnowledgeList(this.classificationId);
      this.getStudyTime();
    },
  },
};
</script>

<style lang="scss" scoped>
.panel {
  width: 25%;
  padding: 10px;
  box-sizing: border-box;

  .img-wrap {
    width: 100%;
    height: 150px;
    background: #eee;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 10px;

    .image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      width: 100%;
      transition: 0.5s;
    }
  }

  &:hover .image {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.orange {
  color: orange;
}

.green {
  color: rgb(6, 199, 28);
}

.blue {
  color: rgb(13, 152, 216);
}

.securityName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
